<template>
  <div class="container" :style="{ backgroundImage: bg }">
    <!--对话框 start-->
    <div>
      <!--添加-->
      <el-dialog draggable destroy-on-close v-model="dialogAddVisible" title="添加" width="70%" center>
        <el-form inline :model="addFormInfo" label-width="150px">
          <el-form-item label="头图">
            <el-upload list-type="picture-card"
                       :action="dataStore.fastdfsUploadUrl"
                       :on-success="onHeadImageAddSuccess"
                       :on-remove="onHeadImageAddRemove">
              <el-image :src="addFormInfo.houseHeadImg"/>
            </el-upload>
          </el-form-item>
          <el-form-item label="头图">
            <el-input v-model="addFormInfo.houseHeadImg"></el-input>
          </el-form-item>
          <el-form-item label="标题">
            <el-input v-model="addFormInfo.houseTitle"></el-input>
          </el-form-item>
          <el-form-item label="发布日期">
            <el-date-picker value-format="x" v-model="addFormInfo.housePublishTime" type="date"></el-date-picker>
          </el-form-item>
          <el-form-item label="房源状态">
            <el-input v-model="addFormInfo.houseStatus"></el-input>
          </el-form-item>

          <el-form-item label="租金">
            <el-input v-model="addFormInfo.housePrice"></el-input>
          </el-form-item>
          <el-form-item label="租金单位">
            <el-input v-model="addFormInfo.housePriceUnit"></el-input>
          </el-form-item>
          <el-form-item label="支付方式">
            <el-input v-model="addFormInfo.housePriceType"></el-input>
          </el-form-item>
          <el-form-item label="费用明细">
            <el-input v-model="addFormInfo.housePriceDesc"></el-input>
          </el-form-item>

          <el-form-item label="租赁方式">
            <el-input v-model="addFormInfo.houseRentType"></el-input>
          </el-form-item>
          <el-form-item label="租期时长">
            <el-input v-model="addFormInfo.houseRentTime"></el-input>
          </el-form-item>

          <el-form-item label="房屋类型">
            <el-input v-model="addFormInfo.houseType"></el-input>
          </el-form-item>
          <el-form-item label="建筑面积">
            <el-input v-model="addFormInfo.houseArea"></el-input>
          </el-form-item>
          <el-form-item label="朝向">
            <el-input v-model="addFormInfo.houseOrientation"></el-input>
          </el-form-item>
          <el-form-item label="楼层">
            <el-input v-model="addFormInfo.houseFloor"></el-input>
          </el-form-item>
          <el-form-item label="所属区域">
            <el-input v-model="addFormInfo.houseAddressRegion"></el-input>
          </el-form-item>
          <el-form-item label="大致地址">
            <el-input v-model="addFormInfo.houseAddressDemo"></el-input>
          </el-form-item>
          <el-form-item label="详细地址">
            <el-input v-model="addFormInfo.houseAddress"></el-input>
          </el-form-item>

          <el-form-item label="卧室设施">
            <el-input type="textarea" rows="2" style="width: 800px" v-model="addFormInfo.houseFacilityBedroom"></el-input>
          </el-form-item>
          <el-form-item label="公共设施">
            <el-input type="textarea" rows="2" style="width: 800px" v-model="addFormInfo.houseFacilityPublic"></el-input>
          </el-form-item>
          <el-form-item label="房源亮点">
            <el-input type="textarea" rows="2" style="width: 800px" v-model="addFormInfo.houseLight"></el-input>
          </el-form-item>
          <el-form-item label="房源要求">
            <el-input type="textarea" rows="4" style="width: 800px" v-model="addFormInfo.houseDemand"></el-input>
          </el-form-item>
          <el-form-item label="房源描述">
            <el-input type="textarea" rows="6" style="width: 800px" v-model="addFormInfo.houseDesc"></el-input>
          </el-form-item>

          <el-form-item label="经纪人" style="width: 300px">
            <el-select v-model="addFormInfo.houseBrokerId">
              <el-option v-for="item in houseBrokerList.list" :key="item.houseBrokerId"
                         :label="item.houseBrokerName"
                         :value="item.houseBrokerId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所在小区" style="width: 300px">
            <el-select v-model="addFormInfo.housePlotId">
              <el-option v-for="item in housePlotList.list" :key="item.housePlotId"
                         :label="item.housePlotName"
                         :value="item.housePlotId">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogAddVisible = false">取消</el-button>
                <el-button type="primary" @click="sureHandler">确定</el-button>
            </span>
        </template>
      </el-dialog>
      <!--编辑-->
      <el-dialog
          draggable
          destroy-on-close
          v-model="dialogEditorVisible"
          title="编辑"
          width="70%"
          center>
        <el-form inline :model="editorFormInfo" label-width="150px">
          <el-form-item label="头图">
            <el-upload list-type="picture-card"
                       :action="dataStore.fastdfsUploadUrl"
                       :on-success="onHeadImageEditSuccess"
            >
              <el-image :src="editorFormInfo.houseHeadImg"/>

            </el-upload>
          </el-form-item>
          <el-form-item label="图片">
            <el-input v-model="editorFormInfo.houseHeadImg"></el-input>
          </el-form-item>
          <el-form-item label="标题">
            <el-input v-model="editorFormInfo.houseTitle"></el-input>
          </el-form-item>
          <el-form-item label="发布日期">
            <el-date-picker value-format="x" v-model="editorFormInfo.housePublishTime" type="date"></el-date-picker>
          </el-form-item>
          <el-form-item label="房源状态">
            <el-input v-model="editorFormInfo.houseStatus"></el-input>
          </el-form-item>

          <el-form-item label="租金">
            <el-input v-model="editorFormInfo.housePrice"></el-input>
          </el-form-item>
          <el-form-item label="租金单位">
            <el-input v-model="editorFormInfo.housePriceUnit"></el-input>
          </el-form-item>
          <el-form-item label="支付方式">
            <el-input v-model="editorFormInfo.housePriceType"></el-input>
          </el-form-item>
          <el-form-item label="费用明细">
            <el-input v-model="editorFormInfo.housePriceDesc"></el-input>
          </el-form-item>

          <el-form-item label="租赁方式">
            <el-input v-model="editorFormInfo.houseRentType"></el-input>
          </el-form-item>
          <el-form-item label="租期时长">
            <el-input v-model="editorFormInfo.houseRentTime"></el-input>
          </el-form-item>

          <el-form-item label="房屋类型">
            <el-input v-model="editorFormInfo.houseType"></el-input>
          </el-form-item>
          <el-form-item label="建筑面积">
            <el-input v-model="editorFormInfo.houseArea"></el-input>
          </el-form-item>
          <el-form-item label="朝向">
            <el-input v-model="editorFormInfo.houseOrientation"></el-input>
          </el-form-item>
          <el-form-item label="楼层">
            <el-input v-model="editorFormInfo.houseFloor"></el-input>
          </el-form-item>
          <el-form-item label="所属区域">
            <el-input v-model="editorFormInfo.houseAddressRegion"></el-input>
          </el-form-item>
          <el-form-item label="大致地址">
            <el-input v-model="editorFormInfo.houseAddressDemo"></el-input>
          </el-form-item>
          <el-form-item label="详细地址">
            <el-input v-model="editorFormInfo.houseAddress"></el-input>
          </el-form-item>

          <el-form-item label="卧室设施">
            <el-input type="textarea" rows="2" style="width: 800px" v-model="editorFormInfo.houseFacilityBedroom"></el-input>
          </el-form-item>
          <el-form-item label="公共设施">
            <el-input type="textarea" rows="2" style="width: 800px" v-model="editorFormInfo.houseFacilityPublic"></el-input>
          </el-form-item>
          <el-form-item label="房源亮点">
            <el-input type="textarea" rows="2" style="width: 800px" v-model="editorFormInfo.houseLight"></el-input>
          </el-form-item>
          <el-form-item label="房源要求">
            <el-input type="textarea" rows="4" style="width: 800px" v-model="editorFormInfo.houseDemand"></el-input>
          </el-form-item>
          <el-form-item label="房源描述">
            <el-input type="textarea" rows="6" style="width: 800px" v-model="editorFormInfo.houseDesc"></el-input>
          </el-form-item>

          <el-form-item label="经纪人" style="width: 300px">
            <el-select v-model="editorFormInfo.houseBrokerId">
              <el-option v-for="item in houseBrokerList.list" :key="item.houseBrokerId"
                         :label="item.houseBrokerName"
                         :value="item.houseBrokerId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所在小区" style="width: 300px">
            <el-select v-model="editorFormInfo.housePlotId">
              <el-option v-for="item in housePlotList.list" :key="item.housePlotId"
                         :label="item.housePlotName"
                         :value="item.housePlotId">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogEditorVisible = false">取消</el-button>
                <el-button type="primary" @click="sureEditorHandler">确定</el-button>
            </span>
        </template>
      </el-dialog>
    </div>
    <!--对话框 end-->

    <!--顶部 start-->
    <div class="header" v-if="headerShow">
      <div class="search">
        <el-input class="input" size="large" @keyup.enter="searchHandle" v-model="searchInfo"
                  placeholder="请输入关键字"></el-input>
        <el-button icon="Search" size="large" @click="searchHandle" color="#3c8dbc">搜索</el-button>
      </div>
    </div>
    <!--顶部 end-->

    <!--表格 start-->
    <div class="table-container">
      <div class="table-header">
        <div class="button-list">
          <el-button icon="DocumentAdd" type="success" @click="addHander">新增</el-button>
          <el-button icon="DocumentAdd" type="primary">导入</el-button>
          <el-button icon="DocumentAdd" type="warning">导出</el-button>
        </div>
        <div class="icon-list">
          <el-button icon="search" color="#3c8dbc" @click="headerShow?headerShow=false:headerShow=true"></el-button>
          <el-button icon="RefreshRight" color="#269846" @click="reload"></el-button>
          <el-button icon="ArrowLeftBold" color="#133c9a" @click="onClickLeft"></el-button>
        </div>
      </div>
      <el-table class="table" :data="dataList.list" highlight-current-row height="400">
        <el-table-column label="头图" prop="houseHeadImg" align="center">
          <template #default="scope">
            <img :src="scope.row.houseHeadImg" style="height:60px"/>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="标题" prop="houseTitle" align="center"></el-table-column>
        <el-table-column label="发布日期" :formatter="value => detaFormater(Number(value.housePublishTime))"  prop="housePublishTime" align="center"></el-table-column>
        <el-table-column label="是否上架" prop="houseUse" align="center">
          <template #default="scope">
            <el-tag round :type="scope.row.houseUse == '1' ? 'success' : 'info'">
              {{ scope.row.houseUse == '1' ? '上架' : '下架' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="租金" prop="housePrice" align="center"></el-table-column>
        <el-table-column label="租金单位" prop="housePriceType" align="center"></el-table-column>
        <el-table-column label="操作" align="center" width="350">
          <template #default="scope">
            <el-button size="small" icon="edit" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
            <el-button size="small" type="success" @click="router.push('/house/houseImg/'+scope.row.houseId)">图片
            </el-button>
            <el-button size="small" type="success" @click="handleStatus(scope.$index, scope.row)">修改状态
            </el-button>
            <el-button size="small" icon="delete" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          layout="prev,pager,next,jumper"
          :default-page-size="defaultPageSize"
          :total="totalData"
          @current-change="currentChangeHaddler"></el-pagination>
    </div>
    <!--表格 end-->

    <!--底部 start-->
    <div class="bottom">
      <span>© 2024 YueMu Copyrigh</span>
    </div>
    <!--底部 end-->
  </div>
</template>

<script setup>
import {detaFormater} from "@/utils/utils.js"
import {useDataStore} from "@/stores/dataStore.js"
import sysAxios from '@/api/sys.js'
import {onMounted, reactive, ref} from "vue";
import houseAxios from "@/api/house.js";
import {useRouter} from 'vue-router'

const router = useRouter()

const dataStore = useDataStore()
//顶部显示
const headerShow = ref(true)
/**
 * 返回
 */
const onClickLeft = () => {
  history.back();
}
/**
 * 刷新页面
 */
const reload = () => {
  location.reload();
}
//初始化分页查询数据
const dataList = reactive({
  list: []
})
const houseBrokerList = reactive({
  list: []
})
const housePlotList = reactive({
  list: []
})
//初始化总条数
const totalData = ref(0)
//当前页
const currentPage = ref(1)
//初始化分页显示条数
const defaultPageSize = ref(10)
//搜索初始化状态
const searchInfo = ref("")
//添加添加对话框控制器
const dialogAddVisible = ref(false)
//初始化添加对话框状态
const addFormInfo = reactive({
  houseHeadImg: "",
  houseTitle: "",
  housePublishTime: "",
  houseStatus: "",

  housePrice: "",
  housePriceUnit: "",
  housePriceType: "",
  housePriceDesc: "",

  houseRentType: "",
  houseRentTime: "",

  houseType: "",
  houseArea: "",
  houseOrientation: "",
  houseFloor: "",
  houseAddressRegion: "",
  houseAddressDemo: "",
  houseAddress: "",

  houseFacilityBedroom: "",
  houseFacilityPublic: "",
  houseLight: "",
  houseDemand: "",
  houseDesc: "",

  houseUse: "1",

  houseBrokerId: "",
  housePlotId: "",

})
//编辑对话框控制器
const dialogEditorVisible = ref(false)
//初始化编辑对话框状态
const editorFormInfo = reactive({
  houseId: "",
  houseHeadImg: "",
  houseTitle: "",
  housePublishTime: "",
  houseStatus: "",

  housePrice: "",
  housePriceUnit: "",
  housePriceType: "",
  housePriceDesc: "",

  houseRentType: "",
  houseRentTime: "",

  houseType: "",
  houseArea: "",
  houseOrientation: "",
  houseFloor: "",
  houseAddressRegion: "",
  houseAddressDemo: "",
  houseAddress: "",

  houseFacilityBedroom: "",
  houseFacilityPublic: "",
  houseLight: "",
  houseDemand: "",
  houseDesc: "",

  houseUse: "",

  houseBrokerId: "",
  housePlotId: "",


})
/**
 * 网路请求：分页查询
 *  */
const http = () => {
  houseAxios.house_search({
    search: searchInfo.value,
    page: currentPage.value,
    size: defaultPageSize.value
  }).then(res => {
    if (res.data.code == 200) {
      dataList.list = res.data.data.records
      totalData.value = res.data.data.total
    } else {
      ElMessage.error(res.data.message)
    }
  })
}
onMounted(() => {
  http()
  houseAxios.houseBroker_findAll().then(res => {
    if (res.data.code == 200) {
      houseBrokerList.list = res.data.data
    }
  })
  houseAxios.housePlot_findAll().then(res => {
    if (res.data.code == 200) {
      housePlotList.list = res.data.data
    }
  })
})
/**
 * 分页
 */
const currentChangeHaddler = (nowPage) => {
  currentPage.value = nowPage
  http()
}
/**
 * 搜索按钮
 */
const searchHandle = () => {
  http()
}
/**
 * 添加对话框弹出事件
 */
const addHander = () => {
  dialogAddVisible.value = true
}
/**
 * 上传成功的钩子
 */
const onHeadImageAddSuccess = (response, uploadFile) => {
  addFormInfo.houseHeadImg = response.data
  ElMessage.success("上传成功")
}
/**
 * 移除图片的钩子
 */
const onHeadImageAddRemove = (response, uploadFile) => {
  sysAxios.fastdfs_delete({
    filePath: addFormInfo.houseHeadImg
  }).then(res => {
    if (res.data.code == 200) {
      ElMessage.success("移除成功")
    }
  })
}
/**
 * 添加对话框 确定事件
 */
const sureHandler = () => {
  houseAxios.house_add({
    houseHeadImg: addFormInfo.houseHeadImg,
    houseTitle: addFormInfo.houseTitle,
    housePublishTime: addFormInfo.housePublishTime,
    houseStatus: addFormInfo.houseStatus,

    housePrice: addFormInfo.housePrice,
    housePriceUnit: addFormInfo.housePriceUnit,
    housePriceType: addFormInfo.housePriceType,
    housePriceDesc: addFormInfo.housePriceDesc,

    houseRentType: addFormInfo.houseRentType,
    houseRentTime: addFormInfo.houseRentTime,

    houseType: addFormInfo.houseType,
    houseArea: addFormInfo.houseArea,
    houseOrientation: addFormInfo.houseOrientation,
    houseFloor: addFormInfo.houseFloor,
    houseAddressRegion: addFormInfo.houseAddressRegion,
    houseAddressDemo: addFormInfo.houseAddressDemo,
    houseAddress: addFormInfo.houseAddress,

    houseFacilityBedroom: addFormInfo.houseFacilityBedroom,
    houseFacilityPublic: addFormInfo.houseFacilityPublic,
    houseLight: addFormInfo.houseLight,
    houseDemand: addFormInfo.houseDemand,
    houseDesc: addFormInfo.houseDesc,

    houseUse: addFormInfo.houseUse,
    houseBrokerId: addFormInfo.houseBrokerId,
    housePlotId: addFormInfo.housePlotId,
  }).then(res => {
    if (res.data.code == 200) {
      dialogAddVisible.value = false
      http()
    } else {
      ElMessage.error(res.data.message)
    }
  })
}
/**
 * 编辑对话框 弹出事件
 *  */
const handleEdit = (index, row) => {
  dialogEditorVisible.value = true
  houseAxios.house_findById({
    houseId: row.houseId
  }).then(res => {
    if (res.data.code == 200) {
      editorFormInfo.houseId = res.data.data.houseId;
      editorFormInfo.houseHeadImg = res.data.data.houseHeadImg;
      editorFormInfo.houseTitle = res.data.data.houseTitle;
      editorFormInfo.housePublishTime = res.data.data.housePublishTime;
      editorFormInfo.houseStatus = res.data.data.houseStatus;

      editorFormInfo.housePrice = res.data.data.housePrice;
      editorFormInfo.housePriceUnit = res.data.data.housePriceUnit;
      editorFormInfo.housePriceType = res.data.data.housePriceType;
      editorFormInfo.housePriceDesc = res.data.data.housePriceDesc;

      editorFormInfo.houseRentType = res.data.data.houseRentType;
      editorFormInfo.houseRentTime = res.data.data.houseRentTime;

      editorFormInfo.houseType = res.data.data.houseType;
      editorFormInfo.houseArea = res.data.data.houseArea;
      editorFormInfo.houseOrientation = res.data.data.houseOrientation;
      editorFormInfo.houseFloor = res.data.data.houseFloor;
      editorFormInfo.houseAddressRegion = res.data.data.houseAddressRegion;
      editorFormInfo.houseAddressDemo = res.data.data.houseAddressDemo;
      editorFormInfo.houseAddress = res.data.data.houseAddress;

      editorFormInfo.houseFacilityBedroom = res.data.data.houseFacilityBedroom;
      editorFormInfo.houseFacilityPublic = res.data.data.houseFacilityPublic;
      editorFormInfo.houseLight = res.data.data.houseLight;
      editorFormInfo.houseDemand = res.data.data.houseDemand;
      editorFormInfo.houseDesc = res.data.data.houseDesc;

      editorFormInfo.houseUse = res.data.data.houseUse;

      editorFormInfo.houseBrokerId = res.data.data.houseBrokerId;
      editorFormInfo.housePlotId = res.data.data.housePlotId;

    } else {
      ElMessage.error(res.data.data.message)
    }
  })
}
/**
 * 封面上传成功的钩子
 */
const onHeadImageEditSuccess = (response, uploadFile) => {
  //删除以前图片
  sysAxios.fastdfs_delete({
    filePath: editorFormInfo.houseHeadImg
  }).then(res => {
    if (res.data.code == 200) {
      ElMessage.success("fastdfs移除原图片成功")
    }
  })
  //替换为现在的图片
  editorFormInfo.houseHeadImg = response.data
  ElMessage.success("上传成功")

}
/**
 * 编辑对话框 确定事件
 */
const sureEditorHandler = () => {
  houseAxios.house_update({
    houseId: editorFormInfo.houseId,
    houseHeadImg: editorFormInfo.houseHeadImg,
    houseTitle: editorFormInfo.houseTitle,
    housePublishTime: editorFormInfo.housePublishTime,
    houseStatus: editorFormInfo.houseStatus,

    housePrice: editorFormInfo.housePrice,
    housePriceUnit: editorFormInfo.housePriceUnit,
    housePriceType: editorFormInfo.housePriceType,
    housePriceDesc: editorFormInfo.housePriceDesc,

    houseRentType: editorFormInfo.houseRentType,
    houseRentTime: editorFormInfo.houseRentTime,

    houseType: editorFormInfo.houseType,
    houseArea: editorFormInfo.houseArea,
    houseOrientation: editorFormInfo.houseOrientation,
    houseFloor: editorFormInfo.houseFloor,
    houseAddressRegion: editorFormInfo.houseAddressRegion,
    houseAddressDemo: editorFormInfo.houseAddressDemo,
    houseAddress: editorFormInfo.houseAddress,

    houseFacilityBedroom: editorFormInfo.houseFacilityBedroom,
    houseFacilityPublic: editorFormInfo.houseFacilityPublic,
    houseLight: editorFormInfo.houseLight,
    houseDemand: editorFormInfo.houseDemand,
    houseDesc: editorFormInfo.houseDesc,

    houseUse: editorFormInfo.houseUse,

    houseBrokerId: editorFormInfo.houseBrokerId,
    housePlotId: editorFormInfo.housePlotId,
  }).then(res => {
    if (res.data.code == 200) {
      dialogEditorVisible.value = false
      http()
    } else {
      ElMessage.error(res.data.message)
    }
  })
}
/**
 * 删除
 */
const handleDelete = (index, row) => {
  ElMessageBox.confirm(
      '确定删除么',
      '删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    houseAxios.house_delete({
      houseId: row.houseId
    }).then(res => {
      if (res.data.code == 200) {
        ElMessage({
          type: 'success',
          message: "删除成功！！！",
        })
        http()
      } else {
        ElMessage({
          type: 'error',
          message: res.data.message,
        })
      }
    })
  }).catch(error => {
    ElMessage({
      type: 'info',
      message: "取消删除",
    })
  })
}
/**
 * 修改状态
 */
const handleStatus = (index, row) => {
  houseAxios.house_updateStatus({
    houseId: row.houseId
  }).then(res => {
    if (res.data.code == 200) {
      ElMessage.success("修改状态成功")
      http()
    }
  })
}
</script>
<style scoped lang="scss">
.container {
  padding-top: 20px;
  background-size: cover;
}

.header {
  background-color: #ffffff;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 15px;
  padding: 12px;
  border-radius: 10px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  display: flex;

  .search {
    width: 100%;

    .input {
      width: 45%;
    }
  }

}

.table-container {
  background-color: #ffffff;
  margin: 10px;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

  .table-header {
    display: flex;

    .button-list {
      color: #ffffff;
    }

    .icon-list {
      position: fixed;
      right: 30px;
    }
  }

  .table {
    margin: 10px;
    width: 97%;
  }
}

.bottom {
  position: fixed;
  bottom: 0;
  height: 20px;
  background-color: #ffffff;
  width: 100%;
  padding: 10px;

  span {
    position: fixed;
    right: 20px;
    cursor: pointer;
  }
}

</style>
